<template>
  <div class="preview-container">
    <div class="files-list-container">
      <ul class="files-ul" v-if="fileList.length">
        <li
          v-for="(item, index) in fileList"
          :key="index"
          class="file-item"
          :style="{width: showSize}"
        >
          <div class="pic-container" :style="{width: showSize, height: showSize}">
            <img v-if="item.suffix=='.jpg'||item.suffix=='.jpeg'" :src="jpg" alt="" srcset="">
            <img v-else-if="item.suffix=='.png'" :src="png" alt="" srcset="">
            <img v-else-if="item.suffix=='.doc'||item.suffix=='.docx'" :src="doc" alt="" srcset="">
            <img v-else-if="item.suffix=='.xls'||item.suffix=='.xlsx'" :src="xls" alt="" srcset="">
            <img v-else-if="item.suffix=='.pdf'" :src="pdf" alt="" srcset="">
            <img v-else-if="item.suffix=='.rar'" :src="rar" alt="" srcset="">
            <div class="file-operation">
              <div class="btn">

                <slot name="btn">
                  <i
                    v-if="fileBtnOption.findIndex((p)=>p==='preview')>-1"
                    class="icon el-icon-view"
                    @click="handlePreview(item,fileList,index)"
                  />
                  <i
                    v-if="fileBtnOption.findIndex((p)=>p==='download')>-1"
                    class="icon el-icon-download"
                    @click="download(item,fileList,index)"
                  />
                </slot>
              </div>
            </div>
          </div>
          <div class="item-name"><span>{{ item.old_name }}{{ item.suffix }}</span></div>
        </li>
      </ul>
      <div v-else>无</div>
    </div>
    <el-dialog v-if="previewDialog" append-to-body class="preview-dialog" width="1200px" :visible.sync="previewDialog" :close-on-click-modal="false" :title="previewItem.old_name">
      <div class="dialog-main" style="display:flex;justify-content:center;align-items:center;min-height:200px;background: #666;">
        <pdf-preview v-if="previewData.types=='.pdf'&&!isSupportPdf" :urls="previewData.url" />
        <pdf-object v-if="previewData.types=='.pdf'&&isSupportPdf" :urls="previewData.url" />
        <image-preview v-if="previewData.types=='.png'||previewData.types=='.jpg'||previewData.types=='.jpeg'" :currentimg="previewData.url" />
        <audio v-if="previewData.types=='.mp3'||previewData.types=='.wav'" :src="previewData.url" controls :preload="mp4" />
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { filePreviewFun, downloadFun, blobType } from '@/utils/file'
import { dataFlow } from '@/api/upload'
import PDFObject from 'pdfobject'
export default {
  components: {
    ImagePreview: () => import('../ImagePreview/index.vue'),
    pdfPreview: () => import('../pdfPreview/index.vue'),
    pdfObject: () => import('../pdfObject/index.vue')
  },
  props: {
    // 附件预览图标大小
    showSize: {
      type: String,
      default: '120px'
    },
    // filelist
    fileList: {
      type: Array,
      default: () => {}
    },
    // 附件预览图列表是否显示
    showList: {
      type: Boolean,
      default: true
    },
    // 附件预览、编辑、删除按钮显示控制
    fileBtnOption: {
      type: Array,
      default: () => {
        return ['preview', 'download']
      }
    }
  },
  data() {
    return {
      isSupportPdf: true,
      previewDialog: false,
      previewItem: {},
      previewData: {
        url: '',
        name: '',
        types: ''
      },
      jpg: require('@/assets/img/fileTypeIcon/jpg.png'),
      png: require('@/assets/img/fileTypeIcon/png.png'),
      doc: require('@/assets/img/fileTypeIcon/doc.png'),
      xls: require('@/assets/img/fileTypeIcon/xls.png'),
      pdf: require('@/assets/img/fileTypeIcon/pdf.png'),
      ppt: require('@/assets/img/fileTypeIcon/ppt.png'),
      txt: require('@/assets/img/fileTypeIcon/txt.png'),
      zip: require('@/assets/img/fileTypeIcon/zip.png'),
      rar: require('@/assets/img/fileTypeIcon/rar.png'),
      mp4: require('@/assets/img/fileTypeIcon/mp4.png')
    }
  },
  methods: {
    getDataFlow(itemData) {
      const suffix = itemData.suffix.toLowerCase()
      if (suffix === '.jpg' || suffix === '.jpeg' || suffix === '.png' || suffix === '.mp3' || suffix === '.wav' || suffix === '.pdf') {
        const blobtype = blobType(itemData)
        // pdf判断浏览器是否支持
        if (suffix === '.pdf' && PDFObject.supportsPDFs) {
          this.isSupportPdf = true
        } else {
          this.isSupportPdf = false
        }
        dataFlow({ id: itemData.id }).then(res => {
          // 这里也是关键,调用window的这个方法URL方法
          const src = window.URL.createObjectURL(new Blob([res], {
            type: blobtype
          }))
          this.previewData.url = src
          this.previewData.name = itemData.old_name
          this.previewData.types = itemData.suffix
          this.previewDialog = true
          console.log('url:' + this.previewData.url)
        }).catch(err => {
          console.log(err)
          this.$message({
            type: 'error',
            message: err
          })
        })
      } else {
        this.$message({
          type: 'warning',
          message: '暂不支持在线预览'
        })
      }
    },
    handlePreview(item, fileList, index) {
      this.previewItem = item
      if (item.suffix === '.doc' || item.suffix === '.docx' || item.suffix === '.xls' || item.suffix === '.xlsx') {
        filePreviewFun(item)
      } else {
        this.getDataFlow(item)
      }
    },
    download(item, fileList, index) {
      downloadFun(item).then(() => {
        this.$emit('downloadSuccess')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "@/styles/variables.scss";
.preview-container {
  .files-list-container {
    width: 100%;
    .files-ul {
      width: 100%;
      padding: 0px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      .file-item {
        margin-right: 20px;
        overflow: hidden;
        .pic-container {
          min-width: 60px;
          min-height: 60px;
          padding: 5px;
          margin-bottom: 5px;
          border: 1px solid #dcdfe6;
          border-radius: 6px;
          box-sizing: border-box;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          img {
            width: 100%;
          }
          &:hover {
            border: 2px solid $main-color;
            .file-operation {
              display: block;
            }
          }
          .file-operation {
            min-width: 120px;
            min-height: 120px;
            border-radius: 6px;
            background: rgba($color: #000000, $alpha: 0.35);
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -60px;
            margin-left: -60px;
            display: none;
            i,
            .icon {
              font-size: 18px;
              color: #fff;
              padding: 5px;
              margin-right: 5px;
              &:last-of-type {
                margin-right: 0px;
              }
              &:hover {
                cursor: pointer;
              }
            }
            .btn {
              min-width: 120px;
              min-height: 120px;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
            }
          }
        }
        .item-name {
          width: 100%;
          font-size: 14px;
          color: #333;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-word;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          display: -webkit-box;
        }
      }
    }
  }
  ::v-deep .preview-dialog{
    .el-dialog__body{
      padding: 0px 20px 20px;
    }
  }
}
</style>
